<style scoped>
.com-wapper{
  width:100%;
  height:36px;
  line-height:36px;
  position: relative;
}

.com-box{
  width:100%;
  height:36px;
  line-height:36px;
  display: flex;
  align-items: center;
}

.com-box.disable{
  opacity: 0.3;
}

.active-box{
  width:15px;
  height:15px;
  line-height:15px;
  text-align:center;
  border:1px solid #FFF;
  color:#FFF;
  cursor: pointer;
}

.label{
  font-size:12px;
  color:#FFF;
  margin-left:7px;
}

.slider-box{
  height:6px;
  border-radius: 3px;
  margin-left:auto;
  border:1px solid #FFF;
  position: relative;
  cursor: pointer;
}

.slider-bar{
  width:33%;
  height:100%;
  background-color: #FFF;
  position: absolute;
  top:0px;
  left:0px;
}

.slider-ball{
  width:16px;
  height:16px;
  border-radius: 8px;
  position: absolute;
  top:0px;
  margin-top:-5px;
  margin-left:-5px;
  left:0%;
  background-color: #FFF;
  cursor:move;
}

.com-input {
  width:50px;
  height:20px;
  line-height:20px;
  border-radius: 3px;
  border:1px solid #FFF;
  padding:0px 3px;
  margin-left:15px;
  background-color: transparent;
  color:#FFF;
}

.com-unit{
  color:#FFF;
  margin:0px 15px;
  min-width:20px;
}

.able-mask{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

</style>
<template>
<div class="com-wapper">
  <div class="com-box" :class="{'disable':!enable}">
    <div class="active-box" @click="ableHandle">{{enable?'√':''}}</div>
    <div class="label">
      {{label}}
    </div>
    <div class="slider-box" :style="{'width':width+'px'}" ref="barbar" @click="barHandle($event)">
      <div class="slider-bar" :style="{'width':percent*100+'%'}">

      </div>
      <div class="slider-ball" @mousedown.stop.prevent="startHandle" :style="{'left':percent*100+'%'}">

      </div>
    </div>
    <input type="text" class="com-input" :value="data" @blur.prevent="inputHandle($event)">
    <div class="com-unit">{{unit}}</div>
  </div>
  <div class="able-mask" @click="ableHandle" v-if="!enable"></div>
</div>

</template>
<script>
export default {
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    label: {
      type: String,
      default: '设置项'
    },
    value: {
      type: Number
    },
    unit: {
      type: String,
      default: 'px'
    },
    def: {
      type: Number,
      default: 20
    }
  },
  data () {
    return {
      width: 200,
      percent: 0,
      data: 0,
      dataCache: this.def,
      ondrag: false
    }
  },
  computed: {
    enable () {
      return !(typeof this.value === 'undefined' || this.value === null)
    }
  },
  methods: {
    // drag handle
    startHandle () {
      let x = event.pageX
      let flag = true
      this.ondrag = true

      window.onmousemove = () => {
        let dx = event.pageX - x
        if (flag) {
          x = event.pageX
        }

        this.percent = this.percent + dx / this.width
        if (this.percent < 0 || this.percent > 1) {
          flag = false
        } else {
          flag = true
        }
        if (this.percent < 0) {
          this.percent = 0
        }
        if (this.percent > 1) {
          this.percent = 1
        }
      }

      window.onmouseup = () => {
        window.onmousemove = null
        // 防止同时触发barhandle
        setTimeout(() => {
          this.ondrag = false
        }, 10)
        this.data = parseInt(this.percent * (this.max - this.min) + this.min)

        if (this.enable) {
          this.$emit('input', this.data)
        }
      }
    },

    // input handle
    inputHandle (e) {
      let oldValue = this.data
      this.data = parseInt(e.target.value)

      if (isNaN(this.data)) {
        this.data = oldValue
        return
      }

      if (this.data > this.max) {
        this.data = this.max
      }

      if (this.data < this.min) {
        this.data = this.min
      }

      this.percent = (this.data - this.min) / (this.max - this.min)
      this.$emit('input', this.data)
    },

    // bar handle
    barHandle (e) {
      if (this.ondrag || !this.enable) {
        return
      }
      this.percent = (e.pageX - 5 - this.getOffset(this.$refs['barbar']).left) / this.width

      this.data = parseInt(this.percent * (this.max - this.min) + this.min)
      this.$emit('input', this.data)
    },

    // ableHandle
    ableHandle () {
      if (this.enable) {
        this.dataCache = this.data
        this.$emit('input', null)
      } else {
        this.$emit('input', this.dataCache)
      }
    },

    getOffset (dom) {
      let obj = { left: 0, top: 0 }
      while (dom) {
        obj.left += dom.offsetLeft
        obj.top += dom.offsetTop
        dom = dom.offsetParent
      }
      return obj
    }
  },
  watch: {
    value () {
      if ((typeof this.value !== 'undefined') && (this.value !== null) && parseInt(this.value) >= parseInt(this.min)) {
        this.data = parseInt(this.value)
        this.percent = (parseInt(this.value) - this.min) / (this.max - this.min)
      } else {
        this.data = this.min
        this.percent = 0
      }
    }
  }
}
</script>
